<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属相-出生年份</title>

</head>
<body>
	<label>今年是：<select id="currZodiacSelect" onchange="setValue(event)"></select> 年</label><br>
	<label>要算的属相:<div id="zodiacBox"></div><p id="targetZodiac"></p></label>
	<h3 id="now">Now:</h3>
	<h3 id="target">Target:</h3>
	<div id="result">Res:</div>

	<script type="text/javascript">
		var preDataObj = {
			currZindex:0,//当前属相的排序
		}
		var zodiac = ["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]; 
		var btn = '',options = '';
		for (var i = 0; i < zodiac.length; i++) { 
			btn = '<button onclick="getBirthYearByZodiac('+i+')">'+i+zodiac[i]+'</button';
			options += '<option value="'+i+'">'+zodiac[i]+'</option>';
			document.getElementById('zodiacBox').innerHTML += btn;
		}
			document.getElementById('currZodiacSelect').innerHTML = options;

		// Example
		// 今年2018年，狗年，属狗的人可能的出生年份是？
		function getBirthYearByZodiac(targetzodiac) {
			document.getElementById('result').innerHTML='';
			document.getElementById('target').innerHTML = zodiac[targetzodiac]+'年';
			document.getElementById('targetZodiac').innerHTML = '生肖：'+zodiac[targetzodiac];

			var year='';
			var date = new Date();
			var currYear = date.getFullYear();//需提前知道 
			var currZindex = preDataObj.currZindex;//需提前知道
			var targetZindex = targetzodiac;//需提前知道
			var loopns=168;
			document.getElementById('now').innerText = currYear+'年';
			// 12		11		 10		  9		  8		   7 		6 		 5 		  4		  3	  	   2 	    1
			//(猪)	   (狗)	    (鸡)	     (猴)	 (羊)	  (马)	   (蛇)	    (龙)	     (兔)	 (虎)	  (牛)	   (鼠)	   
			//2019(猪) 2018(狗) 2017(鸡) 2016(猴) 2015(羊) 2014(马) 2013(蛇) 2012(龙) 2011(兔) 2010(虎) 2009(牛) 2008(鼠)
			//2007(猪) 2006(狗) 2005(鸡) 2004(猴) 2003(羊) 2002(马) 2001(蛇) 2000(龙) 1999(兔) 1998(虎) 1997(牛) 1996(鼠)
			//1995(猪) 1994(狗) 1993(鸡) 
			//属狗：zindex=11;nowzindex - targetzindex=0;
			//公式：2018-n*12
			//计算0：2018-0*12=2018
			//计算1：2018-1*12=2007
			//计算2：2018-2*12=1994
			//计算3：2018-3*12=1982

			//属鸡：zindex=10;nowzindex - targetzindex=1;
			//公式：2017-n*12
			//计算0：2017-0*12=2017
			//计算1：2017-1*12=2005


			//属猴： 
			//计算0：2018-2-0*12=2016 
			//计算1：2018-2-1*12=2014 

			//兼容公式：nowyear-offsetzindex-loopn*12
			//算法描述：用当下年份减去当下属相的排位与目标属相的排位的差值，再减去n轮（1轮12年）
			console.log(currYear,',',currZindex,',',targetZindex);
			var existYears = [];
			for (var i = 0; i < loopns; i++) {
				var existYear = currYear-(currZindex-targetZindex)-(i*12);
				console.log(i,'轮:',existYear);
				existYears.push({'birth':existYear,'preage':currYear-existYear+1});
				document.getElementById('result').innerHTML += "<div>"+(existYear<10?'000'+existYear:existYear<100?'00'+existYear:existYear<1000?'0'+existYear:existYear)+'年出生，'+(currYear-existYear)+'周岁，'+(currYear-existYear+1)+'虚岁';
			}
			
			// document.getElementById('result').innerHTML = "该属相的出生年份:"+JSON.stringify(existYears);

		} 

		function setValue(e){ 
			preDataObj.currZindex = e.target.selectedIndex;
		}
	</script>
</body>
</html>